<template>
	<view>
		<view class="page-index" :class="{'bgf':navIndex >0}">
			<!-- #ifdef H5 -->
			<view class="header">
				<view class="serch-wrapper flex">
					<view class="logo">
						<image :src="logoUrl" mode=""></image>
					</view>
					<navigator url="/pages/goods_search/index" class="input" hover-class="none"><text
							class="iconfont icon-xiazai5"></text>
						搜索商品</navigator>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP -->
			<view class="mp-header">
				<view class="sys-head" :style="{ height: statusBarHeight }"></view>
				<view class="address-box" style="height: 40px;" @click="goSelectLocation">
					<image style="width: 16px; height: 16px" src="/static/images/location.png"></image>
					<view class="header-address">
						<text v-if="addressInfo.detail">{{addressInfo.detail}}</text>
						<text class="placeholder" v-else>点击管理地址</text>
					</view>
					<image style="width: 10px; height: 10px" src="/static/images/down-select.png"></image>
				</view>
			</view>
			<!-- #endif -->

			<view class="header-search" :style="{ position: 'fixed', top: `${marTop}px` }">
				<view class="serch-wrapper flex">
					<view class="logo-carousel">
						<swiper class="swiper-logo" vertical="true" autoplay="true" interval="3000" duration="500"
							circular="true">
							<swiper-item>
								<image src="/static/images/logo1.png" mode="aspectFit"></image>
							</swiper-item>
							<swiper-item>
								<image src="/static/images/logo2.png" mode="aspectFit"></image>
							</swiper-item>
							<swiper-item>
								<image src="/static/images/logo3.png" mode="aspectFit"></image>
							</swiper-item>
						</swiper>
					</view>
					<navigator url="/pages/goods_search/index" class="input" hover-class="none"><text
							class="iconfont icon-xiazai5"></text>
						搜索商品</navigator>
				</view>
			</view>

			<!-- 首页展示 -->
			<view class="page_content" :style="'margin-top:'+(marTop + 40)+'px;'" v-if="navIndex == 0">
				<view class="top-box">
					<view class="top-box-item" style="width: 40%" @click="goToMembership">
						<img src="/static/images/hy.png" />
						<text>开通会员</text>
					</view>
					<view class="top-box-item" style="width: 30%" @click="goSkill">
						<img src="/static/images/ms.png" />
						<text>积分秒杀</text>
					</view>
					<view class="top-box-item" style="width: 30%" @click="() => onShowModal()">
						<img src="/static/images/mh.png" />
						<text>抽盲盒</text>
					</view>
				</view>

				<!-- 优惠券 -->
				<view class="couponIndex" v-if="couponList.length>0">
					<view class="acea-row" style="height: 100%;">
						<view class="titBox">
							<view class="tit1">领取优惠券</view>
							<view class="tit2">福利大礼包，省了又省</view>
							<navigator class='item' url='/pages/users/user_get_coupon/index' hover-class='none'>
								<view class="tit3">查看全部 <text class="iconfont icon-xiangyou"></text></view>
							</navigator>
						</view>
						<view class="listBox acea-row">
							<view class="list" :class='item.isUse ? "listHui" : "listActive" '
								v-for="(item, index) in couponList.slice(0,2)" :key="index">
								<view class="tit line1" :class='item.isUse ? "pricehui" : "titActive" '>{{item.name}}
								</view>
								<view class="price" :class='item.isUse ? "pricehui" : "icon-color" '>
									{{item.money?Number(item.money):''}}<text class="yuan">元</text>
								</view>
								<view class="ling" v-if="!item.isUse" :class='item.isUse ? "pricehui" : "icon-color" '
									@click="getCoupon(item.id,index)">领取</view>
								<view class="ling" v-else :class='item.isUse ? "pricehui fonthui" : "icon-color" '>已领取
								</view>
								<view class="priceM">满{{item.minPrice?Number(item.minPrice):''}}元可用</view>
							</view>
						</view>

					</view>
				</view>

				<!--				<view class="mp-bg"></view>-->
				<!-- banner -->
				<!--				<view class="swiper" v-if="imgUrls.length">-->
				<!--					<swiper indicator-dots="true" :autoplay="true" :circular="circular" :interval="interval"-->
				<!--						:duration="duration" indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">-->
				<!--						<block v-for="(item,index) in imgUrls" :key="index">-->
				<!--							<swiper-item>-->
				<!--								<navigator :url='item.url' class='slide-navigator acea-row row-between-wrapper'-->
				<!--									hover-class='none'>-->
				<!--									<image :src="item.pic" class="slide-image" lazy-load></image>-->
				<!--								</navigator>-->
				<!--							</swiper-item>-->
				<!--						</block>-->
				<!--					</swiper>-->
				<!--				</view>-->
				<!-- 新闻简报 -->
				<view class='notice acea-row row-middle row-between' v-if="roll.length">
					<view class="pic">
						<image src="/static/images/gxs.jpg"></image>
					</view>
					<text class='line'>|</text>
					<view class='swipers'>
						<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" interval="2500" duration="500"
							vertical="true" circular="true">
							<block v-for="(item,index) in roll" :key='index'>
								<swiper-item>
									<navigator class='item' :url='item.url' hover-class='none'>
										<view class='line1' @click="jumpOfficialAccount(item)">{{item.info}}</view>
									</navigator>
								</swiper-item>
							</block>
						</swiper>
					</view>
					<view class="iconfont icon-xiangyou"></view>
				</view>



				<!-- menu -->
				<view class='nav acea-row' v-if="menus.length">
					<block v-for="(item,index) in menus" :key="index">
						<navigator class='item' v-if="item.show == '1'" :url="`${item.url}?cid=${item.id}`"
							open-type='switchTab' hover-class='none'>
							<view class='pictrue'>
								<image :src='item.pic'></image>
							</view>
							<view class="menu-txt">{{item.name}}</view>
						</navigator>
						<navigator class='item' v-else :url='item.url' hover-class='none'>
							<view class='pictrue'>
								<image :src='item.pic'></image>
							</view>
							<view class="menu-txt">{{item.name}}</view>
						</navigator>
					</block>
				</view>

				<view class="zone">
					<view class="item">
						<navigator url='/pages/users/user_sgin/index' class="button" hover-class="none">
							<view class="picTxt acea-row row-middle">
								<view class="pictrue"><text class="iconfont icon-qiandao2"></text></view>
								<view class="text">
									<view class="name line1">签到领积分</view>
								</view>
							</view>
						</navigator>
					</view>
					<view class="item">
						<navigator url='/pages/promotional_items/index' class="button" hover-class="none">
							<view class="picTxt acea-row row-middle">
								<view class="pictrue on"><text class="iconfont icon-shangpin"></text></view>
								<view class="text">
									<view class="name line1">预售好物</view>
								</view>
							</view>
						</navigator>
					</view>
				</view>

				<!-- 新品开箱 好物榜单 -->
				<view style="display: flex; gap: 8px;">
					<view class="new-goods" @click="goToNewArrivals">
						<view class="title">新品开箱</view>
						<view style="display: flex; justify-content: space-between">
							<view class="bm-right-content" v-for="item in newGoods">
								<view class="bm-right-image">
									<image style="width: 90rpx; height: 90rpx" :src='item.image'></image>
								</view>
								<view class="bm-right-price"><text
										class="price-symbol">￥</text><text>{{ item.price }}</text></view>
							</view>
						</view>
					</view>

					<view class="new-goods" @click="goToGoodThings">
						<view class="title">供销优选 | 家乡味道</view>
						<view style="display: flex; justify-content: space-between">
							<view class="bm-right-content" v-for="item in goodThings">
								<view class="bm-right-image">
									<image style="width: 90rpx; height: 90rpx" :src='item.image'></image>
								</view>
								<view class="bm-right-price"><text
										class="price-symbol">￥</text><text>{{ item.price }}</text></view>
							</view>
						</view>
					</view>
				</view>


				<!-- 今日必买 -->
				<!--        <view class="bm-wrapper">-->
				<!--          <view class="bm-left">-->
				<!--            <view class="bm-left-top">-->
				<!--              <view class="bm-left-title">今日必买</view>-->
				<!--              <view class="bm-left-sub-title">店长推荐</view>-->
				<!--            </view>-->
				<!--            <view class="bm-left-bottom">-->
				<!--              <image  src='/static/images/dijia.png'></image>-->
				<!--            </view>-->
				<!--          </view>-->
				<!--          <view class="bm-right">-->
				<!--            <view class="bm-right-content" v-for="item in newGoods">-->
				<!--              <view class="bm-right-image">-->
				<!--                <image style="width: 75rpx; height: 75rpx" :src='item.image'></image>-->
				<!--              </view>-->
				<!--              <span class="bm-right-price">￥{{ item.price }}</span>-->
				<!--              <span class="bm-right-remark">{{ item.remark }}</span>-->
				<!--            </view>-->
				<!--          </view>-->
				<!--        </view>-->

				<!-- 活动-->
				<!--<a_seckill></a_seckill>-->
				<!--				<b_combination></b_combination>-->
				<!--				<c_bargain></c_bargain>-->

				<!-- 首页推荐 -->
				<!-- :class="iSshowH?'on':''" -->
				<view class="sticky-box" :style="'top:'+(marTop)+'px;'">
					<scroll-view class="scroll-view_H" style="width: 100%;" scroll-x="true" scroll-with-animation
						:scroll-left="tabsScrollLeft" @scroll="scroll">
						<view class="tab nav-bd" id="tab_list">
							<view id="tab_item" :class="{ 'active': listActive == index}" class="item"
								v-for="(item, index) in explosiveMoney" :key="index" @click="ProductNavTab(item,index)">
								<view class="txt">{{item.name}}</view>
								<view class="label">{{item.info}}</view>
							</view>
						</view>
					</scroll-view>
				</view>

				<!-- 首发新品 -->
				<view class="index-product-wrapper" :class="iSshowH?'on':''">
					<view class="list-box animated" :class='tempArr.length > 0?"fadeIn on":""'>
						<view class="item" v-for="(item,index) in tempArr" :key="index" @click="goDetail(item)">
							<view class="pictrue">
								<span class="pictrue_log pictrue_log_class"
									v-if="item.activityH5 && item.activityH5.type === '1'">秒杀</span>
								<span class="pictrue_log pictrue_log_class"
									v-if="item.activityH5 && item.activityH5.type === '2'">砍价</span>
								<span class="pictrue_log pictrue_log_class"
									v-if="item.activityH5 && item.activityH5.type === '3'">拼团</span>
								<image :src="item.image" mode=""></image>
							</view>
							<view class="text-info">
								<view class="title line1">{{item.storeName}}</view>
								<view class="old-price"><text>¥{{item.otPrice}}</text></view>
								<view class="price">
									<text>￥</text>{{item.price}}
									<view class="txt" v-if="item.checkCoupon">券</view>
								</view>
							</view>
						</view>
					</view>
					<view class='loadingicon acea-row row-center-wrapper' v-if="goodScroll">
						<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>
					</view>
					<view class="mores-txt flex" v-if="!goodScroll">
						<text>我是有底线的</text>
					</view>
				</view>
			</view>
		</view>

		<view v-if="showModal" @touchmove.stop.prevent>
			<view class="modal-mask"></view>

			<canvas class="particle-canvas" canvas-id="particleCanvas"
				:style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"></canvas>
			<view v-if="awardedPoints > 0" class="modal-tip"
				style="display: flex;justify-content: center;align-items: center;flex-direction: column;">
				<view class="goodinfo">
					<view ref="container" class="container" id="container">
						<view>{{ awardedPoints }}</view>
					</view>
				</view>
				<view class="box_head">
					<image style="width: 128px; height: 40px;"
					src="https://home.zjuzhan.com/crmebimage/public/maintain/2025/11/16/4c621eda75e246f5908cc7ef12951c81tv3paqsrru.png" />
				</view>
				<view class="box_body">
					<image style="width: 128px; height: 87px;"
					src="https://home.zjuzhan.com/crmebimage/public/maintain/2025/11/16/56470ceb6fd74e74906a5258f7bab621pvu0w6tm61.png" />
				</view>

				<view class="modal-close" style="margin-top: 8px;" @click="closeModal">✕</view>

			</view>

			<view v-else class="modal-tip"
				style="display: flex; justify-content: center;align-items: center;flex-direction: column;">
				<image style="width: 128px; height: 40px;"
					src="https://home.zjuzhan.com/crmebimage/public/maintain/2025/11/16/4c621eda75e246f5908cc7ef12951c81tv3paqsrru.png" />
				<image style="width: 128px; height: 87px;"
					src="https://home.zjuzhan.com/crmebimage/public/maintain/2025/11/16/56470ceb6fd74e74906a5258f7bab621pvu0w6tm61.png" />
				<button style="margin-top: 12px; padding: 4px 16px; border-radius: 20px;z-index: 1333;" type="warn"
					@click="onDraw">抽盲盒</button>
				<view class="modal-close" @click="closeModal">✕</view>
			</view>

		</view>
	</view>
</template>

<script>
	import Auth from '@/libs/wechat';
	import Cache from '../../utils/cache';
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	let app = getApp();
	import {
		getIndexData,
		getCoupons,
		setCouponReceive
	} from '@/api/api.js';
	// #ifdef MP-WEIXIN
	import {
		getTemlIds
	} from '@/api/api.js';
	// import {
	// 	SUBSCRIBE_MESSAGE,
	// 	TIPS_KEY
	// } from '@/config/cache';
	// #endif
	// #ifdef H5  
	import {
		follow
	} from '@/api/public.js';
	// #endif
	import {
		getShare
	} from '@/api/public.js';
	// import a_seckill from './components/a_seckill';
	// import b_combination from './components/b_combination';
	// import c_bargain from './components/c_bargain';
	import goodList from '@/components/goodList';
	import promotionGood from '@/components/promotionGood';
	// import couponWindow from '@/components/couponWindow';
	import ClipboardJS from "@/plugin/clipboard/clipboard.js";
	import {
		goShopDetail
	} from '@/libs/order.js'
	import {
		mapGetters
	} from "vuex";
	import tabNav from '@/components/tabNav.vue'
	// import countDown from '@/components/countDown';
	import {
		getCategoryList,
		getProductslist,
		getProductHot,
		getGroomList
	} from '@/api/store.js';
	// import {
	// 	setVisit
	// } from '@/api/user.js'
	import recommend from '@/components/recommend';
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	import {
		silenceBindingSpread
	} from '@/utils';
	// #ifndef MP
	import {
		kefuConfig
	} from "@/api/public";
	import {
		getWechatConfig
	} from "@/api/public";
	// #endif
	import Loading from '@/components/Loading/index.vue';
	import {
		lotteryDraw
	} from "@/api/lottery";
	import {
		getAddressDefault
	} from "@/api/user";
	const arrTemp = ["beforePay", "afterPay", "refundApply", "beforeRecharge", "createBargain", "pink"];
	export default {
		computed: mapGetters(['isLogin', 'uid']),
		components: {
			tabNav,
			goodList,
			promotionGood,
			// couponWindow,
			// countDown,
			// a_seckill,
			// b_combination,
			// c_bargain,
			recommend,
			// #ifdef MP
			authorize,
			// #endif
			Loading
		},
		data() {
			return {
				awardedPoints: 0,
				showModal: false,
				loaded: false,
				loading: false,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				statusBarHeight: statusBarHeight,
				navIndex: 0,
				navTop: [],
				followUrl: "",
				followHid: true,
				followCode: false,
				logoUrl: "",
				imgUrls: [],
				itemNew: [],
				menus: [],
				bastInfo: '',
				fastInfo: '',
				fastList: [],
				firstInfo: '',
				salesInfo: '',
				indicatorDots: false,
				circular: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				window: false,
				iShidden: false,
				navH: "",
				newGoodsBananr: '',
				couponList: [],
				liveList: [],
				hotList: [{
					pic: '/static/images/hot_001.png'
				}, {
					pic: '/static/images/hot_002.png'
				}, {
					pic: '/static/images/hot_003.png'
				}],
				ProductNavindex: 0,
				marTop: 0,
				childID: 0,
				loadend: false,
				loadTitle: '加载更多',
				sortProduct: [],
				where: {
					cid: 0,
					page: 1,
					limit: 10,
				},
				is_switch: true,
				hotPage: 1,
				hotLimit: 10,
				hotScroll: false,
				explosiveMoney: [],
				prodeuctTop: 0,
				searchH: 0,
				isFixed: false,
				goodType: 0, //精品推荐Type
				goodScroll: true, //精品推荐开关
				params: { //精品推荐分页
					page: 1,
					limit: 10,
				},
				tempArr: [], //精品推荐临时数组
				roll: [], // 新闻简报
				site_name: '', //首页title
				iSshowH: false,
				configApi: {}, //分享类容配置
				spikeList: [], // 秒杀
				point: '',
				privacyStatus: false, // 隐私政策是否同意过
				tabsScrollLeft: 0, // tabs当前偏移量
				scrollLeft: 0,
				lineColor: 'red',
				lineStyle: {}, // 下划线位置--动态甲酸
				listActive: 0, // 当前选中项
				duration: 0.2, // 下划线动画时长
				newGoods: [],
				goodThings: [],
				addressInfo: {},
				canvasWidth: 300,
				canvasHeight: 400,
				particles: [],
				ctx: null,
				animationId: null
			}
		},
		watch: {
			ProductNavindex(newVal) { // 监听当前选中项
				this.setTabList()
			},
			listActive(newVal) { // 监听当前选中项
				this.setTabList()
			}
		},
		mounted() {
			this.setTabList()
		},
		onLoad() {
			var that = this;
			// 获取系统信息
			uni.getSystemInfo({
				success(res) {
					that.$store.commit("SYSTEM_PLATFORM", res.platform);
				}
			});
			uni.getLocation({
				type: 'gcj02',
				altitude: true,
				geocode: true,
				success: function(res) {
					console.log('getLocation', res)
					try {
						uni.setStorageSync('user_latitude', res.latitude);
						uni.setStorageSync('user_longitude', res.longitude);
					} catch {}
				}
			});
			let self = this
			// #ifdef MP
			// 获取小程序头部高度
			this.navH = app.globalData.navHeight;
			let info = uni.createSelectorQuery().select(".mp-header");
			info.boundingClientRect(function(data) {
				self.marTop = data.height
				self.poTop = Number(data.height) + 84
			}).exec()
			// #endif
			// #ifndef MP
			this.navH = 0;
			// #endif
			this.isLogin && silenceBindingSpread();
			// Promise.all([this.getAllCategory(), this.getIndexConfig()
			// 	// , this.setVisit()
			// ]);
			this.getIndexConfig();
			// #ifdef MP
			this.getTemlIds()
			// #endif
		},
		onShow() {
			let self = this
			uni.setNavigationBarTitle({
				title: self.site_name
			})
			if (this.isLogin) {
				console.log("isLogin? 获取地址信息")
				getAddressDefault().then(res => {
					console.log("获取地址信息结束")
					self.addressInfo = res.data || {};
				})
			}
		},
		methods: {

			initCanvas() {
				// 获取Canvas上下文
				this.ctx = uni.createCanvasContext('particleCanvas', this)

				// 设置Canvas尺寸
				const systemInfo = uni.getSystemInfoSync()
				this.canvasWidth = systemInfo.windowWidth
				this.canvasHeight = systemInfo.windowHeight * 0.6
			},

			triggerExplosion(x = this.canvasWidth / 2, y = this.canvasHeight / 2) {
				// 清除之前的动画
				if (this.animationId) {
					clearTimeout(this.animationId)
				}

				// 创建粒子
				this.createParticles(x, y)

				// 开始动画
				this.animateParticles()
			},

			createParticles(x, y) {
				this.particles = []
				const particleCount = 80
				const colors = [
					'#FF5252', '#FF4081', '#E040FB', '#7C4DFF',
					'#536DFE', '#448AFF', '#40C4FF', '#18FFFF',
					'#64FFDA', '#69F0AE', '#B2FF59', '#EEFF41'
				]

				for (let i = 0; i < particleCount; i++) {
					const angle = Math.random() * Math.PI * 2
					const speed = 2 + Math.random() * 4
					const size = 3 + Math.random() * 5
					const color = colors[Math.floor(Math.random() * colors.length)]

					this.particles.push({
						x: x,
						y: y,
						vx: Math.cos(angle) * speed,
						vy: Math.sin(angle) * speed,
						size: size,
						color: color,
						alpha: 1,
						decay: 0.01 + Math.random() * 0.02,
						gravity: 0.1
					})
				}
			},

			animateParticles() {
				// 清除画布
				this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)

				let activeParticles = 0

				// 更新和绘制每个粒子
				this.particles.forEach(particle => {
					// 更新位置
					particle.x += particle.vx
					particle.y += particle.vy
					particle.vy += particle.gravity

					// 更新透明度
					particle.alpha -= particle.decay

					// 如果粒子仍然可见
					if (particle.alpha > 0) {
						activeParticles++

						// 绘制粒子
						this.ctx.setFillStyle(this.hexToRgba(particle.color, particle.alpha))
						this.ctx.beginPath()
						this.ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2)
						this.ctx.fill()
					}
				})

				// 提交绘制
				this.ctx.draw()

				// 如果还有活跃的粒子，继续动画
				if (activeParticles > 0) {
					this.animationId = setTimeout(() => {
						this.animateParticles()
					}, 30)
				}
			},

			hexToRgba(hex, alpha) {
				const r = parseInt(hex.slice(1, 3), 16)
				const g = parseInt(hex.slice(3, 5), 16)
				const b = parseInt(hex.slice(5, 7), 16)
				return `rgba(${r}, ${g}, ${b}, ${alpha})`
			},

			// 清空所有粒子
			clearParticles() {
				this.clearAnimation()
				this.particles = []
				this.activeParticlesCount = 0

				// 清除画布
				this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
				this.ctx.draw()
			},

			// 清除动画循环
			clearAnimation() {
				if (this.animationId) {
					clearTimeout(this.animationId)
					this.animationId = null
				}
			},

			handleTouch(e) {
				const touch = e.touches[0]
				this.triggerExplosion(touch.x, touch.y)
			},

			handleClick(e) {
				this.triggerExplosion(e.detail.x, e.detail.y)
			},

			jumpOfficialAccount(item) {
				console.log('fsdfsdf')
				wx.openOfficialAccountArticle({
					url: item.url, // 此处填写公众号文章连接
					success: res => {
						console.log('success', res)
					},
					fail: res => {
						console.log('fail', res)
					}
				})
			},

			goSkill() {
				uni.navigateTo({
					url: '/pages/activity/goods_seckill/index'
				})
			},
			getCoupon: function(id, index) {
				let that = this;
				//领取优惠券
				setCouponReceive(id).then(function(res) {
					that.$set(that.couponList[index], 'isUse', true);
					that.$util.Tips({
						title: '领取成功'
					});
				}, function(res) {
					return that.$util.Tips({
						title: res
					});
				})
			},
			clickSort(index) {
				this.listActive = index
			},
			// scroll-view滑动事件
			scroll(e) {
				this.scrollLeft = e.detail.scrollLeft;
			},
			setTabList() {
				this.$nextTick(() => {
					//this.setLine()
					this.scrollIntoView()
				})
			},
			// 计算tabs位置
			scrollIntoView() { // item滚动
				let lineLeft = 0;
				this.getElementData('#tab_list', (data) => {
					let list = data[0]
					this.getElementData(`#tab_item`, (data) => {
						let el = data[this.listActive]
						lineLeft = el.width / 2 + (-list.left) + el.left - list.width / 2 - this.scrollLeft
						this.tabsScrollLeft = this.scrollLeft + lineLeft
					})
				})
			},
			//  计算下划线位置
			setLine() {
				let lineWidth = 0,
					lineLeft = 0
				this.getElementData(`#tab_item`, (data) => {
					let el = data[this.listActive]
					lineWidth = el.width / 2
					// lineLeft = el.width * (this.currentIndex + 0.5)  // 此种只能针对每个item长度一致的
					lineLeft = el.width / 2 + (-data[0].left) + el.left
					this.lineStyle = {
						width: `${lineWidth}px`,
						transform: `translateX(${lineLeft}px) translateX(-50%)`,
						transitionDuration: `${this.duration}s`
					};
				})
			},
			getElementData(el, callback) {
				uni.createSelectorQuery().in(this).selectAll(el).boundingClientRect().exec((data) => {
					callback(data[0]);
				});
			},
			xieyiApp() {
				uni.navigateTo({
					url: '/pages/users/web_page/index?webUel=https://admin.java.crmeb.net/useragreement/xieyi.html&title=协议内容'
				})
			},
			// #ifdef MP
			getTemlIds() {
				for (var i in arrTemp) {
					this.getTem(arrTemp[i]);
				}
			},
			getTem(data) {
				getTemlIds({
					type: data
				}).then(res => {
					if (res.data) {
						let arr = res.data.map((item) => {
							return item.tempId
						})
						wx.setStorageSync('tempID' + data, arr);
					}
				})
			},
			// #endif
			// 首页数据
			getIndexConfig: function() {
				let that = this;
				getIndexData().then(res => {
					console.log('getIndexData response:', res.data);
					uni.setNavigationBarTitle({
						title: '首页'
					})
					//	that.$set(that, "logoUrl", "/static/images/ssgx.png");
					that.$set(that, "site_name", '首页');
					that.$set(that, "imgUrls", res.data.banner);
					that.$set(that, "menus", res.data.menus);
					that.$set(that, "roll", res.data.roll ? res.data.roll : []);
					// #ifdef H5
					that.$store.commit("SET_CHATURL", res.data.yzfUrl);
					Cache.set('chatUrl', res.data.yzfUrl);
					// #endif
					that.$set(that, "explosiveMoney", res.data.explosiveMoney);
					that.goodType = res.data.explosiveMoney[0].type
					if (this.isLogin) {
						this.getGroomList();
						this.getcouponList();
					}
					this.shareApi();
					this.getNewGoodsData();
					this.getGoodThingsData();
					// #ifdef H5
					// that.subscribe = res.data.subscribe;
					// #endif

				})
			},
			getcouponList() {
				let that = this;
				getCoupons({
					page: 1,
					limit: 6
				}).then(res => {
					that.$set(that, "couponList", res.data);
					// 小程序判断用户是否授权；
					// #ifdef MP
					uni.getSetting({
						success(res) {
							if (!res.authSetting['scope.userInfo']) {
								that.window = that.couponList.length ? true : false;
							} else {
								that.window = false;
								that.iShidden = true;
							}
						}
					});
					// #endif
					// #ifndef MP
					if (that.isLogin) {
						that.window = false;
					} else {
						that.window = res.data.length ? true : false;
					}
					// #endif
				}).catch(err => {
					return this.$util.Tips({
						title: err
					});
				});
			},
			shareApi: function() {
				getShare().then(res => {
					this.$set(this, 'configApi', res.data);
					// #ifdef H5
					this.setOpenShare(res.data);
					// #endif
				})
			},
			getChatUrL() {
				kefuConfig().then(res => {
					let data = res.data;
					this.$store.commit("SET_CHATURL", data.yzfUrl);
					Cache.set('chatUrl', data.yzfUrl);
				})
			},
			// 微信分享；
			setOpenShare: function(data) {
				let that = this;
				if (that.$wechat.isWeixin()) {
					let configAppMessage = {
						desc: data.synopsis,
						title: data.title,
						link: location.href,
						imgUrl: data.img
					};
					that.$wechat.wechatEvevt(["updateAppMessageShareData", "updateTimelineShareData"],
						configAppMessage);
				}
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			// 授权回调
			onLoadFun() {

			},
			// 首发新品切换
			ProductNavTab(item, index) {
				this.listActive = index
				this.goodType = item.type
				this.listActive = index
				this.ProductNavindex = index
				this.tempArr = []
				this.params.page = 1
				this.goodScroll = true
				let onloadH = true
				this.getGroomList(onloadH)
			},
			// 首发新品详情
			goDetail(item) {
				if (item.activityH5 && item.activityH5.type === "2" && !this.isLogin) {
					toLogin();
				} else {
					goShopDetail(item, this.uid).then(res => {
						uni.navigateTo({
							url: `/pages/goods_details/index?id=${item.id}`
						})
					})
				}
			},
			// 分类详情
			godDetail(item) {
				goShopDetail(item, this.uid).then(res => {
					uni.navigateTo({
						url: `/pages/goods_details/index?id=${item.id}`
					})
				})
			},
			// 精品推荐
			getGroomList(onloadH) {
				this.loading = true
				let type = this.goodType;
				if (!this.goodScroll) return
				if (onloadH) {
					this.iSshowH = true
				}
				getGroomList(type, this.params).then(({
					data
				}) => {
					this.iSshowH = false
					this.loading = false
					this.goodScroll = data.list.length >= this.params.limit
					this.params.page++
					this.tempArr = this.tempArr.concat(data.list)
				})
			},
			/**
			 * 获取我的推荐
			 */
			get_host_product: function() {
				let that = this;
				that.loading = true;

				if (that.hotScroll) return
				getProductHot(
					that.hotPage,
					that.hotLimit,
				).then(res => {
					that.hotPage++
					that.hotScroll = res.data.list.length < that.hotLimit
					that.hostProduct = that.hostProduct.concat(res.data.list)
				});
			},

			onShowModal() {
				console.log('showModal')
				this.showModal = true
				this.initCanvas()
			},

			onDraw() {
				uni.showLoading({
					title: '正在开盲盒...'
				})
				lotteryDraw().then((result) => {
					this.awardedPoints = result.data.awardedPoints
					setTimeout(() => {
						this.triggerExplosion()
					}, 800)
					uni.hideLoading()
					uni.showToast({
						icon: 'success',
						title: '抽奖成功！',
						duration: 500,
					})
				}).catch((res) => {
					uni.hideLoading()
					uni.showToast({
						title: res,
						icon: 'none',
						duration: 2000
					});
				})

			},

			closeModal() {
				this.showModal = false
				this.awardedPoints = 0
				this.clearParticles()
			},

			getNewGoodsData() {
				getGroomList(3, {
					page: 1,
					limit: 2
				}).then(res => {
					this.newGoods = res.data.list;
				})
			},
			getGoodThingsData() {
				getGroomList(1, {
					page: 1,
					limit: 2
				}).then(res => {
					this.goodThings = res.data.list;
				})
			},
			goToNewArrivals() {
				uni.navigateTo({
					url: '/pages/users/new_arrivals/index'
				});
			},
			goToGoodThings() {
				uni.navigateTo({
					url: '/pages/good_things/index'
				});
			},

			goToMembership() {
				uni.navigateTo({
					url: '/pages/membership/index'
				});
			},

			goSelectLocation() {
				uni.navigateTo({
					url: '/pages/users/user_address_list/index'
				});
			},

		},
		mounted() {
			let self = this
			// #ifdef H5
			//self.getChatUrL();
			// 获取H5 搜索框高度
			let appSearchH = uni.createSelectorQuery().select(".serch-wrapper");
			appSearchH.boundingClientRect(function(data) {
				self.searchH = data.height
			}).exec()
			// #endif
		},
		/**
		 * 用户点击右上角分享
		 */
		// #ifdef MP
		onShareAppMessage: function() {
			return {
				title: this.configApi.title,
				imageUrl: this.configApi.img,
				desc: this.configApi.synopsis,
				path: '/pages/index/index'
			};
		},
		// #endif
		onReachBottom() {
			if (this.navIndex == 0) {
				// 首页加载更多
				if (this.params.page != 1) {
					this.getGroomList();
				}
			} else {
				// 分类栏目加载更多
				if (this.sortProduct.length > 0) {
					//this.get_product_list();
				} else {
					this.get_host_product();
				}
			}
		},

	}
</script>
<style>
	page {
		display: flex;
		flex-direction: column;
		height: 100%;
		/* #ifdef H5 */
		background-color: #fff;
		/* #endif */

	}
</style>
<style lang="scss">
	.notice {
		width: 100%;
		height: 84rpx;
		border-radius: 10rpx;
		background-color: #fff;
		margin-bottom: 25rpx;
		line-height: 84rpx;
		padding: 0 14rpx;

		.line {
			color: #CCCCCC;
		}

		.pic {
			width: 200rpx;
			height: 47.6rpx;

			image {
				width: 100%;
				height: 100%;
				display: block !important;
			}
		}

		.swipers {
			height: 100%;
			width: 400rpx;
			overflow: hidden;

			swiper {
				height: 100%;
				width: 100%;
				overflow: hidden;
				font-size: 26rpx;
				font-weight: 600;
				color: #333333;
			}
		}

		.iconfont {
			color: #999999;
			font-size: 20rpx;
		}
	}

	.couponIndex {
		width: auto;
		height: 160rpx;
		background-image: url('~@/static/images/yhjsy.png');
		background-size: 100% 100%;
		padding-left: 42rpx;
		margin-bottom: 30rpx;

		.titBox {
			padding: 20rpx 0;
			text-align: center;
			height: 100%;

			.tit1 {
				color: #FFEBD2;
				font-size: 28rpx;
				font-weight: 600;
			}

			.tit2 {
				color: #FFEBD2;
				font-size: 22rpx;
				margin: 10rpx 0 16rpx 0;
			}

			.tit3 {
				color: #FFDAAF;
				font-size: 22rpx;

				.iconfont {
					font-size: 20rpx;
				}
			}
		}

		.listBox {
			padding: 10rpx 0;

			.listActive {
				background-image: url('~@/static/images/lingyhj.png');
				background-size: 100% 100%;
			}

			.listHui {
				background-image: url('~@/static/images/weiling.png');
				background-size: 100% 100%;
			}

			.list {
				width: 140rpx;
				height: 140rpx;
				padding: 8rpx 0;
				text-align: center;
				margin-left: 24rpx;

				.tit {
					font-size: 18rpx;
					padding: 0 26rpx;
				}

				.titActive {
					color: #C99959;
				}

				.price {
					font-size: 32rpx;
					font-weight: 900;
					margin-top: 1rpx;
				}

				.pricehui {
					color: #B2B2B2;
				}

				.fonthui {
					background-color: #F5F5F5 !important;
				}

				.yuan {
					font-size: 24rpx;
				}

				.ling {
					font-size: 24rpx;
					margin-top: 9.5rpx;
					width: 102rpx;
					height: 32rpx;
					line-height: 32rpx;
					background-color: #FFE5C7;
					border-radius: 28rpx;
					margin: auto;
				}

				.priceM {
					color: #FFDAAF;
					font-size: 20rpx;
					margin-top: 4rpx;
				}
			}
		}
	}

	.sticky-box {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		position: -webkit-sticky;
		/* #endif */
		position: sticky;
		/* #ifdef H5*/
		top: var(--window-top);
		/* #endif */

		z-index: 99;
		flex-direction: row;
		margin: 0px;
		background: #f5f5f5;
		padding: 30rpx 0;
	}

	.listAll {
		width: 20%;
		text-indent: 62rpx;
		font-size: 30rpx;
		border-left: 1px #eee solid;
		margin: 1% 0;
		padding: 5rpx;
		position: relative;

		image {
			position: absolute;
			left: 20rpx;
			top: 8rpx;
		}
	}

	.tab {
		position: relative;
		display: flex;
		font-size: 28rpx;
		white-space: nowrap;

		&__item {
			flex: 1;
			padding: 0 20rpx;
			text-align: center;
			height: 60rpx;
			line-height: 60rpx;
			color: #666;

			&.active {
				color: #09C2C9;
			}
		}
	}

	.tab__line {
		display: block;
		height: 6rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1;
		border-radius: 3rpx;
		position: relative;
		background: #2FC6CD;
	}

	.scroll-view_H {
		/* 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 */
		white-space: nowrap;
		width: 100%;
	}


	.privacy-wrapper {
		z-index: 999;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: #7F7F7F;

		.privacy-box {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 560rpx;
			padding: 50rpx 45rpx 0;
			background: #fff;
			border-radius: 20rpx;

			.title {
				text-align: center;
				font-size: 32rpx;
				text-align: center;
				color: #333;
				font-weight: 700;
			}

			.content {
				margin-top: 20rpx;
				line-height: 1.5;
				font-size: 26rpx;
				color: #666;
				text-indent: 54rpx;

				i {
					font-style: normal;
					color: $theme-color;
				}
			}

			.btn-box {
				margin-top: 40rpx;
				text-align: center;
				font-size: 30rpx;

				.btn-item {
					height: 82rpx;
					line-height: 82rpx;
					background: linear-gradient(90deg, #F67A38 0%, #F11B09 100%);
					color: #fff;
					border-radius: 41rpx;
				}

				.btn {
					padding: 30rpx 0;
				}
			}
		}
	}

	.page-index {
		display: flex;
		flex-direction: column;
		min-height: 100%;
		background: linear-gradient(180deg, #fff 0%, #f5f5f5 100%);

		.header {
			width: 100%;
			background-color: $theme-color;
			padding: 28rpx 30rpx;

			.serch-wrapper {
				align-items: center;


				.logo {
					width: 250rpx;
					height: 60rpx;
					margin-right: 34rpx;
				}

				image {
					width: 250rpx;
					height: 60rpx;
				}

				.input {
					display: flex;
					align-items: center;
					width: 446rpx;
					height: 58rpx;
					padding: 0 0 0 44rpx;
					background: rgba(247, 247, 247, 1);
					border: 1px solid rgba(241, 241, 241, 1);
					border-radius: 29rpx;
					color: #BBBBBB;
					font-size: 26rpx;

					.iconfont {
						margin-right: 20rpx;
						font-size: 26rpx;
						color: #666666;
					}
				}
			}

			.tabNav {
				padding-top: 24rpx;
			}
		}

		/* #ifdef MP */
		.mp-header {
			z-index: 999;
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			/* #ifdef H5 */
			padding-bottom: 20rpx;
			/* #endif */
			background-color: #fff;

			.address-box {
				padding: 0 30rpx;
				display: flex;
				align-items: center;

				.header-address {
					margin: 0 2px 0 4px;
					max-width: 220px;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					font-size: 16px;

					.placeholder {
						color: #ccc;
					}
				}
			}


			.serch-wrapper {
				height: 100%;
				align-items: center;
				padding: 0 50rpx 0 53rpx;

				image {
					width: 120rpx;
					height: 60rpx;
					margin-right: 30rpx;
				}

				.input {
					display: flex;
					align-items: center;
					/* #ifdef MP */
					width: 330rpx;
					/* #endif */
					height: 50rpx;
					padding: 0 0 0 30rpx;
					background: rgba(247, 247, 247, 1);
					border: 1px solid rgba(241, 241, 241, 1);
					border-radius: 29rpx;
					color: #BBBBBB;
					font-size: 28rpx;

					.iconfont {
						margin-right: 20rpx;
					}
				}
			}
		}

		.header-search {
			//position: sticky;
			//top: 0;
			width: 100%;
			height: 40px;
			background: #fff;
			z-index: 999;

			.serch-wrapper {
				display: flex;
				height: 100%;
				align-items: center;
				padding: 0 30rpx;

				.logo-carousel {
					width: 150rpx;
					height: 60rpx;
					margin-right: 18rpx;

					.swiper-logo {
						width: 100%;
						height: 100%;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.input {
					display: flex;
					align-items: center;
					flex: 1;
					height: 66rpx;
					padding: 0 0 0 30rpx;
					background: rgba(247, 247, 247, 1);
					border: 1px solid rgba(241, 241, 241, 1);
					border-radius: 29rpx;
					color: #BBBBBB;
					font-size: 28rpx;

					.iconfont {
						margin-right: 20rpx;
					}
				}
			}

		}

		/* #endif */

		.page_content {
			background-color: #f5f5f5;
			/* #ifdef H5 */
			// margin-top: 20rpx !important;
			/* #endif */
			padding: 0 30rpx;
			position: relative;

			.swiper {
				position: relative;
				width: 100%;
				height: 280rpx;
				margin: 0 auto;
				border-radius: 10rpx;
				overflow: hidden;
				margin-bottom: 25rpx;
				/* #ifdef MP */
				z-index: 10;
				margin-top: 20rpx;

				/* #endif */
				swiper,
				.swiper-item,
				image {
					width: 100%;
					height: 280rpx;
					border-radius: 10rpx;
				}
			}

			.nav {
				padding-bottom: 26rpx;
				background: #fff;
				opacity: 1;
				border-radius: 14rpx;
				width: 100%;
				margin-bottom: 30rpx;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 20%;
					margin-top: 30rpx;

					image {
						width: 82rpx;
						height: 82rpx;
					}
				}
			}


			.nav-bd {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.txt {
						font-size: 32rpx;
						color: #282828;
					}

					.label {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 124rpx;
						height: 32rpx;
						margin-top: 5rpx;
						font-size: 24rpx;
						color: #999;
					}

					&.active {
						color: $theme-color;

						.txt {
							color: $theme-color;
						}

						.label {
							background: linear-gradient(90deg, $bg-star 0%, $bg-end 100%);
							border-radius: 16rpx;
							color: #fff;
						}
					}
				}
			}

			.index-product-wrapper {
				margin-bottom: 110rpx;

				&.on {
					min-height: 1500rpx;
				}

				.list-box {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					.item {
						width: 335rpx;
						margin-bottom: 20rpx;
						background-color: #fff;
						border-radius: 10rpx;
						overflow: hidden;

						image {
							width: 100%;
							height: 330rpx;
						}

						.text-info {
							padding: 10rpx 20rpx 15rpx;

							.title {
								color: #222222;
							}

							.old-price {
								margin-top: 8rpx;
								font-size: 26rpx;
								color: #AAAAAA;
								text-decoration: line-through;

								text {
									margin-right: 2px;
									font-size: 20rpx;
								}
							}

							.price {
								display: flex;
								align-items: flex-end;
								color: #E93323;
								font-size: 34rpx;
								font-weight: 800;

								text {
									padding-bottom: 4rpx;
									font-size: 24rpx;
									font-weight: 800;
								}

								.txt {
									display: flex;
									align-items: center;
									justify-content: center;
									width: 28rpx;
									height: 28rpx;
									margin-left: 15rpx;
									margin-bottom: 10rpx;
									border: 1px solid $theme-color;
									border-radius: 4rpx;
									font-size: 22rpx;
									font-weight: normal;
								}
							}
						}
					}

					&.on {
						display: flex;
					}
				}
			}
		}
	}

	.productList {
		/* #ifdef H5 */
		padding-bottom: 140rpx;
		/* #endif */
	}

	.productList .list {
		padding: 0 20rpx;
	}

	.productList .list.on {
		background-color: #fff;
		border-top: 1px solid #f6f6f6;
	}

	.productList .list .item {
		width: 345rpx;
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
	}

	.productList .list .item.on {
		width: 100%;
		display: flex;
		border-bottom: 1rpx solid #f6f6f6;
		padding: 30rpx 0;
		margin: 0;
	}

	.productList .list .item .pictrue {
		position: relative;
		width: 100%;
		height: 345rpx;
	}

	.productList .list .item .pictrue.on {
		width: 180rpx;
		height: 180rpx;
	}

	.productList .list .item .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 20rpx 20rpx 0 0;
	}

	.productList .list .item .pictrue image.on {
		border-radius: 6rpx;
	}

	.productList .list .item .text {
		padding: 20rpx 17rpx 26rpx 17rpx;
		font-size: 30rpx;
		color: #222;
	}

	.productList .list .item .text.on {
		width: 508rpx;
		padding: 0 0 0 22rpx;
	}

	.productList .list .item .text .money {
		font-size: 26rpx;
		font-weight: bold;
		margin-top: 8rpx;
	}

	.productList .list .item .text .money.on {
		margin-top: 50rpx;
	}

	.productList .list .item .text .money .num {
		font-size: 34rpx;
	}

	.productList .list .item .text .vip {
		font-size: 22rpx;
		color: #aaa;
		margin-top: 7rpx;
	}

	.productList .list .item .text .vip.on {
		margin-top: 12rpx;
	}

	.productList .list .item .text .vip .vip-money {
		font-size: 24rpx;
		color: #282828;
		font-weight: bold;
	}

	.productList .list .item .text .vip .vip-money image {
		width: 46rpx;
		height: 21rpx;
		margin-left: 4rpx;
	}

	.pictrue {
		position: relative;
	}

	.fixed {
		z-index: 100;
		position: fixed;
		left: 0;
		top: 0;
		background: linear-gradient(90deg, red 50%, #ff5400 100%);

	}

	.mores-txt {
		width: 100%;
		align-items: center;
		justify-content: center;
		height: 70rpx;
		color: #999;
		font-size: 24rpx;

		.iconfont {
			margin-top: 2rpx;
			font-size: 20rpx;
		}
	}

	.menu-txt {
		font-size: 24rpx;
		color: #454545;
	}

	.mp-bg {
		position: absolute;
		left: 0;
		/* #ifdef H5 */
		top: 98rpx;
		/* #endif */
		width: 100%;
		height: 304rpx;
		//background: linear-gradient(180deg, #003a81 0%, #03418d 100%, #0e5999 100%);
		// border-radius: 0 0 30rpx 30rpx;
	}

	.bm-wrapper {
		display: flex;
		padding: 12rpx;
		background: #fff;
		border-radius: 14rpx;
		width: 100%;
		height: 200rpx;
		margin-bottom: 30rpx;

		.bm-left {
			padding: 6rpx;
			width: 20%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.bm-left-title {
				font-size: 30rpx;
				font-weight: bold;
				color: darkblue;
				margin-bottom: 8rpx;
			}

			.bm-left-sub-title {
				font-size: 24rpx;
			}

			.bm-left-bottom {
				width: 100%;
				height: 40rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

		}

		.bm-right {
			width: 80%;
			display: flex;

			.bm-right-content {
				flex: 1;
				width: 0;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.bm-right-image {
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.bm-right-price {
					color: #fe4e2c;
					font-size: 26rpx;
					font-weight: bold;
					margin-bottom: 4rpx;
					margin-top: 8rpx;
				}

				.bm-right-remark {
					color: #ca983d;
					font-size: 18rpx;
				}
			}
		}
	}

	.zone {
		display: flex;
		justify-content: space-between;
		margin-bottom: 12px;

		.item {
			flex: 0 0 calc(50% - 6px);
			/* 减去一半的间距 */
			background: #fff;
			border-radius: 8px;
			padding: 4px 16px;

			.picTxt {
				.pictrue {
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					background: linear-gradient(-45deg, rgba(249, 119, 107, 1) 0%, rgba(255, 147, 137, 1) 100%);
					text-align: center;
					line-height: 70rpx;
					color: #fff;

					&.on {
						background: linear-gradient(-45deg, rgba(254, 160, 96, 1) 0%, rgba(255, 204, 170, 1) 100%);
					}

					&.on2 {
						background: linear-gradient(-45deg, rgba(157, 208, 116, 1) 0%, rgba(161, 214, 124, 1) 100%);
					}
				}
			}

			.text {
				margin-left: 8px;

				.name {
					font-size: 16px;
					font-weight: normal;
				}
			}
		}
	}

	.new-goods {
		flex: 1;
		background: #fff;
		border-radius: 8px;
		padding: 8px 16px;

		.title {
			font-size: 30rpx;
			font-weight: bold;
			color: black;
			margin-bottom: 8rpx;
		}

		.bm-right-content {
			flex: 1;
			width: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.bm-right-image {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.bm-right-price {
				color: #fe4e2c;
				font-size: 26rpx;
				font-weight: bold;
				margin-bottom: 4rpx;
				margin-top: 8rpx;

				.price-symbol {
					font-size: 18rpx;
				}
			}
		}
	}

	.top-box {
		margin-top: 8px;
		margin-bottom: 8px;
		background: rgba(255, 255, 255, 0.95);
		border-radius: 8px;
		//box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
		display: flex;
		justify-content: space-around;
		/* Added for equal spacing */
		overflow: hidden;
		position: relative;

		&:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 2px;
			background: transparent;
		}

		&-item {
			//flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 10px 5px 5px 5px;
			position: relative;
			cursor: pointer;
			transition: all 0.3s ease;

			&:not(:last-child)::after {
				content: '';
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				height: 60%;
				width: 1px;
				background: rgba(0, 0, 0, 0.08);
			}

			img {
				width: 45px;
				height: 45px;
			}

			text {
				font-size: 14px;
				font-weight: 600;
				margin-top: 2px;
			}
		}
	}

	.modal-mask {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		z-index: 1000;
		background: rgba(255, 255, 255, 1);
		transition-timing-function: ease-in;
		transition-property: visibility, opacity;
		transition-duration: 0.25s;
		//visibility: hidden;
		//opacity: 0;
	}

	.modal-tip {
		position: fixed;
		left: 50%;
		top: 50%;
		width: 640rpx;
		height: 560rpx;
		border-radius: 16rpx;
		transform: translate(-50%, -50%);
		z-index: 1001;
	}

	.modal-content {
		width: 100%;
		height: 100%;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
	}

	.draw-box {
		position: relative;
		height: 100%;
		width: 100%;
		padding-top: 70rpx;
		border-radius: 16rpx;
		background-image: url('https://home.zjuzhan.com/crmebimage/public/maintain/2025/10/17/fe0c15c124e141ac93a22bc9ac2555194af2z9qtz5.jpg');
		background-size: 100% 100%;
		background-repeat: no-repeat;

		.draw {
			display: flex;
			justify-content: center;
			align-items: center;

			.points {
				margin-top: 40rpx;
				color: #fff;
				font-size: 72rpx;
				font-weight: bold;
			}

			img {
				width: 280rpx;
				margin: 0 auto;
				height: 200rpx;
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
		}

		.draw-btn {
			img {
				position: absolute;
				bottom: 18rpx;
				left: 0;
				width: 100%;
				height: 142rpx;
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}

		}
	}

	.modal-close {
		width: 60rpx;
		height: 60rpx;
		color: #000;
		line-height: 60rpx;
		text-align: center;
		border-radius: 50%;
		border: 1px solid #000;
		position: relative;
		bottom: -10%;
		// left: 50%;
		// transform: translate(-50%, -50%);
	}

	.modal {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .8);
		z-index: 4;
	}

	.modal_view {
		height: 100%;
		width: 268rpx;
	}

	.modal_close {
		color: #fff;
		width: 64rpx;
		height: 64rpx;
		text-align: center;
		line-height: 64rpx;
		bottom: 140rpx;
		left: 50%;
		margin-left: -32rpx;
		position: absolute;
		font-size: 64rpx;
		font-weight: 100;
	}

	.goodinfo {
		animation: goodinfo 1s forwards;
		animation-delay: 1s;
		text-align: center;
		color: #D32F2F;
		font-weight: bold;
		width: 100%;
		transform: scale(0);
		opacity: 0;
		position: absolute;
		left: 0;
		top: 100rpx;
	}

	.goodinfo image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		animation: goodinfoimage 1s forwards;
		animation-delay: 1s;
	}

	.goodinfo>view {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 64rpx;
	}

	.box_head {
		animation: box_head 1s cubic-bezier(0, 0.2, 0, 1) forwards;
		animation-delay: .5s;
	}

	.box_body {
		animation: box_body 1s forwards;
		animation-delay: .5s;
	}

	@keyframes goodinfo {
		0% {
			transform: scale(0);
			opacity: 0;
		}

		50% {
			transform: scale(1.1);
			opacity: 1;
		}

		100% {
			transform: scale(1);
			opacity: 1;
		}
	}

	@keyframes goodinfoimage {
		0% {
			transform: rotate(0);
			opacity: 0;
		}
		100% {
			transform: rotate(360deg);
			opacity: 1;
		}
	}

	@keyframes box_head {
		0% {
			transform: translateY(0);
		}
		30% {
			transform: translateY(20rpx) rotate(2deg);
		}
		33% {
			transform: translateY(20rpx) rotate(0deg);
		}
		36% {
			transform: translateY(20rpx) rotate(-2deg);
		}
		39% {
			transform: translateY(20rpx) rotate(0deg);
		}
		42% {
			transform: translateY(20rpx) rotate(2deg);
		}
		45% {
			transform: translateY(20rpx) rotate(0deg);
		}
		100% {
			transform: translateY(-100rpx) rotate(0deg);
		}
	}

	@keyframes box_body {
		0% {
			transform: rotate(0) scale(1);
		}
		30% {
			transform: rotate(-2deg) scale(1.04);
		}
		40% {
			transform: rotate(0) scale(1);
		}
		450% {
			transform: rotate(1deg);
		}
		50% {
			transform: rotate(0);
		}
		55% {
			transform: rotate(-1deg);
		}
		60% {
			transform: rotate(0);
		}
	}
	.particle-canvas {
		position: absolute;
		top: 0;
		z-index: 1001;
		border-radius: 10px;
		margin-bottom: 30px;
	}
</style>